<template>
  <pageTabelLayout>
    <template #pageHeader>
      <div class="search-form isheader" v-show="headerShow" style="padding-top: 15px">
        <a-form size="small" :model="query" layout="inline">
          <CorporateSectorCascader
            ref="cascaderRef"
            :configCascader="configCascader"
            @changeCascader="changeCascader"
            v-if="permissionStore.hasPermisson('zjgzjzl.cx')"
          />
          <a-form-item label="值机工" prop="id" v-if="permissionStore.hasPermisson('zjgzjzl.cx')">
            <el-select-v2
              v-model="query.id"
              :options="repairmanList"
              placeholder=""
              filterable
              :loading="repairmanLoading"
              clearable
              @focus="repairmanFocus"
              size="default"
            />
          </a-form-item>
          <a-form-item
            label="查询日期"
            prop="beginDate"
            v-if="permissionStore.hasPermisson('zjgzjzl.cx')"
          >
            <a-date-picker
              popup-container="html"
              v-model="query.queryDate"
              :style="{ width: '180px' }"
              placeholder="&nbsp"
              class="bacClass"
            />
          </a-form-item>
        </a-form>
        <div class="my-tool-bar">
          <Toolbar :items="pageData.btnList" @select="getList" @export="exportExcel"> </Toolbar>
        </div>
      </div>
      <div class="my-divisders">
        <a-divider orientation="center">
          <icon-double-up
            v-if="headerShow"
            @click="headerShow = false"
            :strokeWidth="2"
            :size="18"
          />
          <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
        </a-divider>
      </div>
    </template>
    <!-- <template #pageHeader>
        <div class="my-tool-bar">
          <Toolbar :items="pageData.btnList" @select="getList" @export="exportExcel"> </Toolbar>
        </div>
        <div class="my-divisders">
          <a-divider orientation="center">
            <icon-double-up
              v-if="headerShow"
              @click="headerShow = false"
              :strokeWidth="2"
              :size="18"
            />
            <icon-double-down v-else @click="headerShow = true" :strokeWidth="2" :size="18" />
          </a-divider>
        </div>
      </template> -->
    <template #pageTabel>
      <AgGridVuesCopys
        :rowHeight="33"
        :headerHeight="33"
        :suppressCopyRowsToClipboard="true"
        :suppressDragLeaveHidesColumns="true"
        v-loading="loadingElplus"
        rowSelection="multiple"
        @grid-ready="gridReady"
        @columnVisible="onColumnVisible"
        style="height: calc(100% - 40px)"
        :defaultColDef="defaultColDef"
        class="ag-theme-alpine"
        :rowData="pageData.dataList"
        :columnDefs="tc"
        :localeText="localeText1"
        @columnResized="onColumnResized"
        @columnMoved="onColumnMoved"
      ></AgGridVuesCopys>
      <paginationCopys
        :total="query.total"
        show-total
        show-jumper
        show-page-size
        @change="PageSize"
        @page-size-change="changeSize"
        style="justify-content: center"
        :page-size="query.size"
        :current="query.page"
        :page-size-options="pagingList1"
      />
    </template>
  </pageTabelLayout>
</template>

<script lang="ts" setup>
  //表格
  

  //表格数据处理
  import { useTableColumn } from '@/hooks/table'
  import { localeText } from '@/api/aggridZw'

  //分页列表
  import { pagingList } from '@/api/paging'

  // 引入element提示
  import { ElMessage, Message } from 'element-plus'

  //引入封装post
  import { post } from '@/api/http'

  //路由离开时触发
  import { onBeforeRouteLeave } from 'vue-router'

  //引入导出方法
  import { EXPORTEXEL, EXELTABLE } from '@/utils/exportEXCEL'

  // 公司部门组件
  import CorporateSectorCascader from '@/components/corporateSectorCascader/inde.vue'

  // 引入日期插件
  import dayjs from 'dayjs'
  import usePermission from '@/store/modules/permission'
  import { saveOrUpdateGridState as saveOrUpdateGridState01 } from '@/hooks/useGridState'
  interface Pagein {
    btnList: any
    dataList: any
    tc: any
    height: any
  }

  // 跟请求参数无关的放这里
  let pageData = reactive<Pagein>({
    btnList: [], // 按钮列表
    dataList: [],
    tc: [],
    height: undefined,
  })
  //值机工值机质量
  const permissionStore = usePermission()
  if (permissionStore.hasPermisson('zjgzjzl.cx')) {
    pageData.btnList.push('查询')
  }
  if (permissionStore.hasPermisson('zjgzjzl.dc')) {
    pageData.btnList.push('导出')
  }
  interface Querin {
    total: any
    page: any
    size: any
    planOrderCode: Number | String
    startDate: Number | String
    endDate: Number | String
    company_id: Number | String
    queryDate: any
    department_id: Number | String
    id: Number | String
  }

  //getlist初始化接口参数
  let query = reactive<Querin>({
    total: 0,
    page: 1,
    size: 10,
    planOrderCode: '',
    startDate: '',
    endDate: '',
    company_id: '',
    queryDate: dayjs().format('YYYY-MM-DD'),
    department_id: '',
    id: '',
  })

  // 分页数组条数
  const pagingList1: any = ref(pagingList)

  //tabs选中的值
  let activeNme = ref<string>('1')

  // 表格准备事件
  const gridOption = ref()
  const colState = ref()
  const gridReady = (params: any) => {
    gridOption.value = params.api
    colState.value = params.columnApi
  }

  //表格配置
  const defaultColDef = {
    sortable: true,
    resizable: true,
    filter: true,
    //flex: 1
  }

  // 表格列
  let tableColumns = useTableColumn([
    {
      title: '公司',
      key: 'companyName',
      dataIndex: 'companyName',
      width: 150,
    },
    {
      title: '值机员工',
      key: 'name',
      dataIndex: 'name',
      width: 150,
    },
    {
      title: '工号',
      key: 'code',
      dataIndex: 'code',
      width: 150,
    },
    {
      title: '部门',
      key: 'departmentName',
      dataIndex: 'departmentName',
      width: 150,
    },
    {
      title: '值机班长',
      key: 'monitorName',
      dataIndex: 'monitorName',
      width: 150,
    },
    {
      title: '当天次布重量',
      key: 'todayFabricWeight',
      dataIndex: 'todayFabricWeight',
      width: 150,
    },
    {
      title: '当天开机重量',
      key: 'todayCheckWeight',
      dataIndex: 'todayCheckWeight',
      width: 150,
    },
    {
      title: '当天次布率',
      key: 'todayRate',
      dataIndex: 'todayRate',
      width: 150,
    },
    {
      title: '当天次布米数',
      key: 'todayButtonMeterNum',
      dataIndex: 'todayButtonMeterNum',
      width: 150,
    },
    {
      title: '本月累计次布率',
      key: 'monthRate',
      dataIndex: 'monthRate',
      width: 150,
    },
    {
      title: '本月累计次布米数',
      key: 'monthButtonMeterNum',
      dataIndex: 'monthButtonMeterNum',
      width: 150,
    },
    {
      title: '本月累计烂针转数',
      key: 'monthBadNum',
      dataIndex: 'monthBadNum',
      width: 200,
    },
    {
      title: '日期',
      key: 'queryDate',
      dataIndex: 'queryDate',
      width: 200,
    },
  ])
  let tc: any[] = tableColumns.map((o) => {
    let obj = {
      headerName: o.title,
      field: o.key,
      tooltipField: o.key,
    }
    return obj
  })
  const localeText1: any = ref(localeText)
  let a = [
    {
      showRowGroup: 'hide_def',
      headerName: '',
      checkboxSelection: true,
      headerCheckboxSelection: true,
      pinned: 'left',
      width: 50,
      resizable: false,
      filter: false,
      sortable: false,
      minWidth: 50,
      maxWidth: 50,
      lockPosition: 'left',
    },
  ]
  const headerShow = ref(true)

  tc = a.concat(tc)

  // 分页事件
  const PageSize = (val: any) => {
    query.page = val
    getList()
  }

  const changeSize = (val: any) => {
    query.size = val
    getList()
  }
  // loding.....
  let loadingElplus = ref<boolean>(false)

  //获取数据
  const getList = async () => {
    query.queryDate = dayjs(query.queryDate).format('YYYY-MM-DD')
    try {
      loadingElplus.value = true
      updateGridState01()
      let res: any = await post({ url: 'qms/scannedGreyCloth/getPageByEmp', data: query })
      if (res.code == 200) {
        pageData.dataList = res.data.list
        query.total = res.data.total
        loadingElplus.value = false
        return
      }
      ElMessage.error(res.message)
    } finally {
      loadingElplus.value = false
    }
  }
  //员工列表
  let repairmanList = ref<any>([])
  // 员工查询loading
  let repairmanLoading = ref<boolean>(false)
  let cascaderRef = ref('')
  let configCascader = ref<{}>({
    corporateWidth: '180px', //公司宽度
    sectorWidth: '180px', //部门宽度
    corporateRquired: false, //公司是否必填
    sectorRquired: false, //部门是否必填
    size: 'small', //选择框大小'mini' | 'small' | 'medium' | 'large'
    corporateName: '公司', //公司label
    sectorName: '部门', //部门label
  })
  //公司组件选择触发事件
  const changeCascader = (data: any) => {
    const { corporateId, sectorId } = data
    query.id = ''
    repairmanList.value = []
    query.company_id = corporateId
    query.department_id = sectorId
  }
  // 需要传递后端的数据
  const CascaderData = reactive({
    company_id: query.company_id,
    department_id: query.department_id,
    obsoleteState: 0,
    deleteState: 0,
    postName: '值机',
  })
  //查询员工接口
  const repairmanFocus = async () => {
    try {
      repairmanLoading.value = true
      let res: any = await post({ url: 'org/hrEmployee/getList', data: CascaderData })
      if (res.code == 200) {
        res.data.map((item: any) => {
          item.value = item.id
          item.label = item.name
        })
        repairmanList.value = res.data
        repairmanLoading.value = false
        return
      }
      ElMessage.error(res.message)
    } finally {
      repairmanLoading.value = false
    }
  }
  // 导出
  let exportExcel = () => {
    //表头中文名
    // const titleArr = [
    //   '公司',
    //   '验部员工',
    //   '工号',
    //   '部门',
    //   '验布班长',
    //   '当天次布重量',
    //   '当天开机重量',
    //   '当天次布率',
    //   '当天次布米数',
    //   '本月累计次布率',
    //   '本月累计次布米数',
    //   '本月累计烂针转数',
    //   '日期',
    // ]
    // EXPORTEXEL(pageData.dataList, '原料问题开剪次布记录', titleArr, '1')
    EXELTABLE(tableColumns, pageData.dataList, '值机工值机质量')
  }

  //初始化
  onMounted(() => {
    getList()
    pageData.height =
      document.getElementsByClassName('arco-tabs-content')[0]?.clientHeight - 160 + 'px'
    window.addEventListener('resize', resHeight)
  })
  onBeforeRouteLeave((to, from, next) => {
    window.removeEventListener('resize', resHeight)
    next()
  })
  let timer: any
  let resHeight = () => {
    if (timer) {
      clearTimeout(timer)
    }
    timer = setTimeout(() => {
      pageData.height =
        document.getElementsByClassName('arco-tabs-content')[0]?.clientHeight - 160 + 'px'
    }, 200)
    console.log('asao')
  }
  //vue3 使用生命周期销毁钩子
  const { saveGridState: saveGridState01, updateGridState: updateGridState01 } =
    saveOrUpdateGridState01('checkInQuality', gridOption, colState, tc)
  const onColumnMoved = () => {
    saveGridState01()
  }
  const onColumnResized = () => {
    saveGridState01()
  }
  const onColumnVisible = () => {
    saveGridState01()
  }
  onUnmounted(() => {
    //移除监听事件
    window.removeEventListener('resize', resHeight)
  })
</script>
<script lang="ts">
  export default defineComponent({
    name: 'checkInQuality',
  })
</script>
<style scoped>
  .contioner {
    height: 100%;
  }

  :deep(.ag-cell) {
    border-right: 1px solid #dde2eb;
  }

  :deep(.ag-header-cell) {
    border-right: 1px solid #dde2eb;
  }

  :deep(.ag-cell-value) {
    user-select: initial;
    -moz-user-select: text;
    -ms-user-select: text;
    -webkit-user-select: text;
  }
</style>
